<template>
    <div class="addPunish">
        <!-- 导航栏 -->
        <div class="header_body">
            <header-nav :leftArrow="true" :titelText="id == '' ? '立案' : '编辑案件'" :slefBack="true"
                @goBack="goBack"></header-nav>
        </div>

        <div class="task">
            <van-form @submit="onSubmit">
                <van-field v-model="taskForm.sourceName" is-link readonly required label="案件来源" placeholder="请选择"
                    @click="checkTypeSelect" />
                <van-field v-if="taskForm.sourceName == '其他'" placeholder="请输入其他案件来源" v-model="taskForm.otherSource"
                    required label="" maxlength="32" />
                <div class="flex">
                    <div class="label"><span style="color: #ee0a24; margin-right: 2px">*</span>案由</div>
                    <div class="btn" @click="getCaseActionList('', true)">
                        <img src="../../assets/images/add-icon.png" alt="">
                        <span>添加案由</span>
                    </div>
                </div>
                <div v-if="ayList.length > 0" class="ay-box">
                    <ul>
                        <template v-for="(item, index) in ayList" :key="item.value">
                            <li v-if="index < 3 || (index >= 3 && showAll)">
                                <span> {{ item.text }}</span>
                                <img @click="clearAY(index)" src="../../assets/images/clear.png" alt="">
                            </li>
                        </template>
                    </ul>
                    <div v-if="ayList.length > 3" class="switch" @click="handleShow">
                        <span>
                            {{ showAll ? '收起' : '全部' }}
                        </span>
                        <img :class="showAll ? 'retract' : 'open'" src="../../assets/images/open.png" alt="">
                    </div>
                </div>
                <div class="childList-2">
                    <div class="childList-title">
                        <span style="color: #ee0a24; margin-right: 2px">*</span>简要案情
                    </div>
                    <div class="childList-item">
                        <van-field v-model="taskForm.caseBrief" rows="2" autosize type="textarea" maxlength="68"
                            placeholder="请输入简要案情" />
                    </div>
                </div>
                <div class="line10"></div>
                <!-- 关联任务 -->
                <template v-if="taskForm.sourceName !== '其他'">
                    <div class="flex">
                        <div class="label"><span style="color: #ee0a24; margin-right: 2px">*</span>关联任务</div>
                        <div class="btn1" v-if="taskForm.taskId" @click="handltaskdetail">
                            查看任务
                        </div>
                        <div class="btn" @click="gotoTaskList">
                            <span>{{ taskForm.taskId ? '重新选择' : '选择任务' }}</span>
                        </div>

                    </div>
                    <div class="line10"></div>
                </template>
                <div class="partyType">
                    <div class="title">
                        <span style="color: #ee0a24; margin-right: 2px">*</span>当事人类型
                    </div>
                    <div class="party" style="margin-bottom: 12px">
                        <div class="partyItem1" :class="taskForm.placeInfo.partyType == 0 ? 'partyItem1Active' : ''
                " @click="setPartyType(0)">
                            自然人
                        </div>
                        <div class="partyItem2" :class="taskForm.placeInfo.partyType == 1 ? 'partyItem1Active' : ''
                " @click="setPartyType(1)">
                            法人
                        </div>
                    </div>
                    <div class="party">
                        <div class="partyItem1" :class="taskForm.placeInfo.partyType == 3 ? 'partyItem1Active' : ''
                " @click="setPartyType(3)">
                            非法人组织
                        </div>
                        <div class="partyItem2" :class="taskForm.placeInfo.partyType == 2 ? 'partyItem1Active' : ''
                " @click="setPartyType(2)">
                            个体工商户
                        </div>
                    </div>
                </div>
                <van-popover v-model:show="showPopover" :actions="actions" @select="actionsSelect">
                    <template #reference>
                        <van-field v-model="taskForm.placeInfo.placeName" @update:model-value="changePlaceName" required
                            :maxlength="taskForm.placeInfo.partyType == 2 ? '15' : '16'" :label="taskForm.placeInfo.partyType == 0
                ? '姓名'
                : taskForm.placeInfo.partyType == 2
                    ? '字号名称'
                    : '单位名称'
                " placeholder="请输入" />
                    </template>
                </van-popover>
                <div class="sex" v-if="taskForm.placeInfo.partyType == 0">
                    <div class="title">
                        <span style="color: #ee0a24; margin-right: 2px">*</span>性别
                    </div>
                    <van-radio-group v-model="taskForm.placeInfo.sex" direction="horizontal">
                        <van-radio :name="1" style="margin-right: 52px">男</van-radio>
                        <van-radio :name="2">女</van-radio>
                    </van-radio-group>
                </div>
                <van-field v-if="taskForm.placeInfo.partyType == 0" v-model="taskForm.placeInfo.birthDate" is-link
                    readonly required label="出生日期" placeholder="请选择" @click="birthDateSelect" />
                <van-field v-model="taskForm.placeInfo.contactsTel" required :label="taskForm.placeInfo.partyType == 0 ? '联系电话' : '单位联系电话'
                " placeholder="请输入" maxlength="13" />
                <van-field v-if="taskForm.placeInfo.partyType == 0" v-model="taskForm.placeInfo.idTypeName" is-link
                    readonly required label="证件类型" placeholder="请选择" @click="idTypeSelect" />
                <van-field v-if="taskForm.placeInfo.partyType == 0" v-model="taskForm.placeInfo.idCode" required
                    label="证件号码" maxlength="18" placeholder="请输入" />
                <van-field v-if="taskForm.placeInfo.partyType != 0" v-model="taskForm.placeInfo.idCode" required
                    label="社会信用代码" maxlength="18" placeholder="请输入" />
                <van-field v-if="taskForm.placeInfo.partyType != 0" v-model="taskForm.placeInfo.headName" required
                    :label="taskForm.placeInfo.partyType == 1
                ? '法人'
                : taskForm.placeInfo.partyType == 3
                    ? '负责人'
                    : '经营者姓名'
                " placeholder="请输入" maxlength="16" />
                <van-field v-if="taskForm.placeInfo.partyType == 1 ||
                taskForm.placeInfo.partyType == 3
                " v-model="taskForm.placeInfo.headTel" required maxlength="13"
                    :label="taskForm.placeInfo.partyType == 1 ? '法人电话' : '负责人电话'" placeholder="请输入" />
                <div class="line10"></div>
                <div v-if="taskForm.placeInfo.partyType != 0">
                    <div class="area">
                        <div class="title">
                            <span style="color: #ee0a24; margin-right: 2px">*</span>
                            注册地址
                        </div>
                    </div>
                    <van-field style="padding-left: 24px !important" v-model="areaValue" is-link readonly label="所属地区"
                        placeholder="请选择所在地区" @click="areaShow = true" />
                    <van-field style="padding-left: 24px !important" v-model="taskForm.placeInfo.registerAddress"
                        type="textarea" rows="1" autosize maxlength="68" label="详细地址" placeholder="请输入" />
                </div>
                <div class="area">
                    <div class="title">
                        <span style="color: #ee0a24; margin-right: 2px">*</span>
                        {{ taskForm.placeInfo.partyType == 0 ? '住址' : '经营地址' }}
                    </div>
                </div>
                <van-field style="padding-left: 24px !important" v-model="areaValue2" is-link readonly label="所属地区"
                    placeholder="请选择所在地区" @click="areaShow2 = true" />
                <van-field style="padding-left: 24px !important" v-model="taskForm.placeInfo.operateAddress"
                    type="textarea" rows="1" autosize maxlength="68" label="详细地址" placeholder="请输入" />
                <div class="line10"></div>
                <van-field v-model="taskForm.checkerName" readonly required label="主办人" />
                <van-field v-model="taskForm.organizer" readonly required placeholder="请选择" label="协办人"
                    @click="organizerSelect" />
                <div class="line10"></div>

                <div class="submitBtn">
                    <van-button plain block type="primary" class="btn-left" native-type="submit"
                        style="margin-right: 8px">
                        暂存
                    </van-button>
                    <van-button block type="primary" class="btn-right" @click="goCheck()">
                        保存
                    </van-button>
                </div>
            </van-form>

            <!-- 类型，方式选择 -->
            <van-popup v-model:show="picker" round position="bottom">
                <van-field v-if="pickerType == 'case_type'" v-model="keyword" required placeholder="请输入案由查询"
                    @update:model-value="getCaseActionList(keyword)" />
                <van-picker :columns="pickerData" @cancel="picker = false" @confirm="pickerConfirm" />
            </van-popup>
            <!--案由-->
            <van-popup v-model:show="picker1" round position="bottom" style="height: 500px;" @close="ayCancel">
                <van-field v-if="pickerType == 'case_type'" v-model="keyword" required placeholder="请输入案由查询"
                    @update:model-value="getCaseActionList(keyword)" />

                <div class="van-picker__toolbar">
                    <button type="button" class="van-picker__cancel" @click="ayCancel">
                        取消
                    </button>
                    <div class="van-ellipsis van-picker__title">{{ $attrs.label }}</div>
                    <button type="button" class="van-picker__confirm" @click="ayConfirm">
                        确认
                    </button>
                </div>
                <van-checkbox-group ref="checkboxGroup" v-model="checked" class="van-checkbox-group">
                    <van-cell-group>
                        <van-cell v-for="(item, index) in pickerData" clickable :key="item.value" :title="item.text"
                            @click="toggle(index)">
                            <template #right-icon>
                                <van-checkbox :name="item.text" :ref="el => checkboxRefs[index] = el" @click.stop />
                            </template>
                        </van-cell>
                    </van-cell-group>
                </van-checkbox-group>
            </van-popup>

            <!-- 协办人 -->
            <van-popup v-model:show="organizerPicker" round position="bottom">
                <van-picker :columns="organizerData" @cancel="organizerPicker = false" @confirm="organizerConfirm" />
            </van-popup>

            <!-- 日期选择 -->
            <van-popup v-model:show="birthdatePicker" round position="bottom">
                <van-date-picker v-model="currentDate" :min-date="minDate" title="选择年月" :columns-type="columnsType"
                    @cancel="birthdatePicker = false" @confirm="birthdatePickerConfirm" />
            </van-popup>

            <!-- 住址，注册地区选择 -->
            <van-popup v-model:show="areaShow" round position="bottom">
                <van-cascader v-model="cascaderValue" title="请选择所在地区" :options="aeraData" :field-names="{
                text: 'name',
                value: 'code',
                children: 'children',
            }" @close="areaShow = false" @finish="onFinish" />
            </van-popup>

            <!-- 经营地址选择 -->
            <van-popup v-model:show="areaShow2" round position="bottom">
                <van-cascader v-model="cascaderValue2" title="请选择所在地区" :options="aeraData2" :field-names="{
                text: 'name',
                value: 'code',
                children: 'children',
            }" @close="areaShow2 = false" @finish="onFinish2" />
            </van-popup>
        </div>
    </div>
</template>

<script setup>
import { ref, onBeforeUpdate } from 'vue'
import {
    showNotify,
    showSuccessToast,
    showConfirmDialog,
    showFailToast,
} from 'vant'
import aeraData from '../../util/pcas-code.json'
import aeraData2 from '../../util/pcas-code.json'
const { usePublic, useRegister, useVision } = $globalStore


const router = useRouter()
const route = useRoute()
const id = ref(route.query.id)
const params = route.query.params ? ref(JSON.parse(route.query.params)) : ''
const taskId = ref(route.query.taskId)
const minDate = ref(new Date(1900, 0, 1))
const handltaskdetail = () => {
    router.push({ name: 'detailSuperviseTasktwo', query: { id: taskId.value } })
}

const goBack = () => {
    showConfirmDialog({
        title: '提示',
        message: '退出后已填内容无法保存，确定退出吗？',
    })
        .then(() => {
            router.push({ name: 'punishList' })
        })
        .catch(() => {
            // on cancel
        })
}

//表单
const taskForm = ref({
    caseType: 1,
    draftFlag: 1,
    sourceId: '',
    sourceName: '',
    caseActionId: '',
    caseActionName: '',
    caseBrief: '', //简要案由
    placeInfo: {
        partyType: 0, //当事人类型
        placeName: '', //姓名，单位名称，字号名称
        contactsTel: '', //联系电话，单位联系电话
        sex: 1, //性别
        birthDate: '', //生日
        idType: '', //证件类型id
        idTypeName: '', //证件类型
        idCode: '', //证件号
        headName: '', //负责人/法人/经营者 姓名
        headTel: '', //负责人/法人 电话
        registerAddress: '', //详细地址、注册地址
        registerCountyCode: 0, //住址，注册区码
        registerCounty: '', //住址，注册区名
        registerTownCode: 0, //住址，注册街镇码
        registerTown: '', //住址，注册街镇名
        operateAddress: '', //经营详细地址
        operateCountyCode: 0, //经营地区码
        operateCounty: '', //经营地区名
        operateTownCode: 0, //经营地街镇码
        operateTown: '', //经营地街镇名
    },
    checkerId: JSON.parse(sessionStorage.getItem('userInfo')).id,
    checkerName: JSON.parse(sessionStorage.getItem('userInfo')).userName, //主办人
    organizerId: '', //协办人id
    organizer: '', //协办人姓名
    taskId: '', //关联任务id
})

const showPopover = ref(false)
const actions = ref([])
const actions2 = ref([])
const changePlaceName = async (val) => {
    if (
        taskForm.value.placeInfo.partyType == 1 ||
        taskForm.value.placeInfo.partyType == 3
    ) {
        const res = await usePublic.getNameList(val)
        if (res.code == 0) {
            actions.value = []
            actions2.value = res.data
            res.data.forEach((item) => {
                let obj = {
                    text: item.placeName,
                }
                actions.value.push(obj)
            })
            showPopover.value = true
        }
    }
}
const actionsSelect = (val) => {
    actions2.value.forEach(async (item) => {
        if (item.placeName == val.text) {
            const res = await usePublic.getPlaceInfo(item.id)
            if (res.code == 0) {
                taskForm.value.placeInfo.partyType = res.data.partyType
                taskForm.value.placeInfo.placeName = res.data.placeName
                taskForm.value.placeInfo.contactsTel = res.data.contactsTel
                if (res.data.birthDate != '') {
                    taskForm.value.placeInfo.birthDate = res.data.birthDate
                    currentDate.value = res.data.birthDate.split('-')
                }
                taskForm.value.placeInfo.idType = res.data.idType
                taskForm.value.placeInfo.idTypeName = res.data.idTypeName
                taskForm.value.placeInfo.idCode = res.data.idCode
                taskForm.value.placeInfo.headName = res.data.headName
                taskForm.value.placeInfo.headTel = res.data.headTel
                //注册地址，住址
                taskForm.value.placeInfo.registerCountyCode =
                    res.data.registerCountyCode
                taskForm.value.placeInfo.registerCounty = res.data.registerCounty
                taskForm.value.placeInfo.registerTownCode = res.data.registerTownCode
                taskForm.value.placeInfo.registerTown = res.data.registerTown
                cascaderValue.value = res.data.registerTownCode
                areaValue.value =
                    '长沙市' + res.data.registerCounty + res.data.registerTown
                taskForm.value.placeInfo.registerAddress = res.data.registerAddress

                //经营地址
                taskForm.value.placeInfo.operateCountyCode = res.data.operateCountyCode
                taskForm.value.placeInfo.operateCounty = res.data.operateCounty
                taskForm.value.placeInfo.operateTownCode = res.data.operateTownCode
                taskForm.value.placeInfo.operateTown = res.data.operateTown
                cascaderValue2.value = res.data.operateTownCode
                areaValue2.value =
                    '长沙市' + res.data.operateCounty + res.data.operateTown
                taskForm.value.placeInfo.operateAddress = res.data.operateAddress
                taskForm.value.placeInfo.id = res.data.placeInfo.id
            }
        }
    })
}

//选项数据
const picker = ref(false)
const picker1 = ref(false)
const pickerData = ref([])
const pickerType = ref('')
const getCheckTypeData = async (val) => {
    const res = await usePublic.getDictionary(val)
    if (res.code == 0) {
        pickerData.value = []
        res.data.forEach((element) => {
            let obj = {
                text: element.configName,
                value: element.id,
            }
            pickerData.value.push(obj)
        })
    }

}

const pickerConfirm = (val) => {
    if (pickerType.value == 'from_type') {
        taskForm.value.sourceId = val.selectedOptions[0].value
        taskForm.value.sourceName = val.selectedOptions[0].text
    } else if (pickerType.value == 'check_mode') {
        taskForm.value.checkModeId = val.selectedOptions[0].value
        taskForm.value.checkModeName = val.selectedOptions[0].text
    } else if (pickerType.value == 'id_type') {
        taskForm.value.placeInfo.idType = val.selectedOptions[0].value
        taskForm.value.placeInfo.idTypeName = val.selectedOptions[0].text
    } else if (pickerType.value == 'case_type') {
        taskForm.value.caseActionId = val.selectedOptions[0].value
        taskForm.value.caseActionName = val.selectedOptions[0].text
    }
    picker.value = false
}

//案件来源
const checkTypeSelect = () => {
    pickerType.value = 'from_type'
    getCheckTypeData('from_type')
    taskForm.value.taskId = ''
    picker.value = true
}

//案由
const keyword = ref('')
const getCaseActionList = async (val, type) => {
    pickerType.value = 'case_type'
    let params = {
        pn: 1,
        ps: 10000,
        keyword: val,
    }
    const res = await useRegister.caseActionList(params)
    if (res.code == 0) {
        pickerData.value = []
        res.data.records.forEach((item) => {
            let obj = {
                text: item.name,
                value: item.id,
            }
            pickerData.value.push(obj)
        })
        if (val == '') {
            keyword.value = ''
            picker1.value = true
            if (type) {
                checked.value = ayList.value.map(item => item.text) || []
            }
        }
    }
}


//协办人选择
const organizerPicker = ref(false)
const organizerData = ref([])
//打开审批负责人选择
const organizerSelect = () => {
    organizerPicker.value = true
    getOrganizers()
}

//选择协办人
const organizerConfirm = (val) => {
    taskForm.value.organizerId = val.selectedOptions[0].value
    taskForm.value.organizer = val.selectedOptions[0].text
    organizerPicker.value = false
}
//获取审核人数据源
const getOrganizers = async (val) => {
    const res = await usePublic.getOrganizer()
    if (res.code == 0) {
        organizerData.value = []
        res.data.forEach((element) => {
            let obj = {
                text: element.userName,
                value: element.id,
            }
            organizerData.value.push(obj)
        })
    }
}

//证件类型
const idTypeSelect = () => {
    pickerType.value = 'id_type'
    getCheckTypeData('id_type')
    picker.value = true
}

//设置当事人类型
const setPartyType = (val) => {
    taskForm.value.placeInfo = {}
    areaValue.value = ''
    areaValue2.value = ''
    taskForm.value.placeInfo.partyType = val
}

//选择出生日期
const birthdatePicker = ref(false)
const columnsType = ['year', 'month', 'day']
const currentDate = ref([])
const birthDateSelect = () => {
    birthdatePicker.value = true
}
const birthdatePickerConfirm = () => {
    taskForm.value.placeInfo.birthDate =
        currentDate.value[0] +
        '-' +
        currentDate.value[1] +
        '-' +
        currentDate.value[2]

    birthdatePicker.value = false
}

//地区选择
const areaShow = ref(false)
const areaValue = ref('')
const cascaderValue = ref('')

const onFinish = (val) => {
    let arr = []
    val.selectedOptions.forEach((item) => {
        arr.push(item.name)
    })
    taskForm.value.placeInfo.registerCountyCode = val.selectedOptions[1].code
    taskForm.value.placeInfo.registerCounty = val.selectedOptions[1].name
    taskForm.value.placeInfo.registerTownCode = val.selectedOptions[2].code
    taskForm.value.placeInfo.registerTown = val.selectedOptions[2].name
    areaValue.value = arr.join('')
    areaShow.value = false
}

//地区选择
const areaShow2 = ref(false)
const areaValue2 = ref('')
const cascaderValue2 = ref('')

const onFinish2 = (val) => {
    let arr = []
    val.selectedOptions.forEach((item) => {
        arr.push(item.name)
    })
    taskForm.value.placeInfo.operateCountyCode = val.selectedOptions[1].code
    taskForm.value.placeInfo.operateCounty = val.selectedOptions[1].name
    taskForm.value.placeInfo.operateTownCode = val.selectedOptions[2].code
    taskForm.value.placeInfo.operateTown = val.selectedOptions[2].name
    areaValue2.value = arr.join('')
    areaShow2.value = false
}

//获取执法机构
const getDept = async () => {
    const res = await usePublic.getDeptList()
    if (res.code == 0) {
        pickerData.value = []
        res.data.forEach((item) => {
            let obj = {
                text: item.name,
                value: item.id,
            }
            pickerData.value.push(obj)
        })
    }
}

//保存任务信息
const backFlag = ref(false)

const onSubmit = async () => {
    if (taskForm.value.sourceId == '') {
        return showNotify({ type: 'danger', message: '请选择案件来源' })
    } else if (ayList.value.length <= 0) {
        return showNotify({ type: 'danger', message: '请选择案由' })
    } else if (taskForm.value.caseBrief == '') {
        return showNotify({ type: 'danger', message: '请输入简要案情' })
    } else if (!taskForm.value.taskId && taskForm.value.sourceName !== '其他') {
        return showNotify({ type: 'danger', message: '请选择关联任务' })
    } else if (
        taskForm.value.placeInfo.placeName == '' ||
        !taskForm.value.placeInfo.placeName
    ) {
        return showNotify({ type: 'danger', message: '请输入姓名或单位名称' })
    } else if (
        (taskForm.value.placeInfo.sex == '' || !taskForm.value.placeInfo.sex) &&
        taskForm.value.placeInfo.partyType == 0
    ) {
        return showNotify({ type: 'danger', message: '请选择性别' })
    } else if (
        (taskForm.value.placeInfo.birthDate == '' ||
            !taskForm.value.placeInfo.birthDate) &&
        taskForm.value.placeInfo.partyType == 0
    ) {
        return showNotify({ type: 'danger', message: '请选择出生日期' })
    } else if (
        taskForm.value.placeInfo.contactsTel == '' ||
        !taskForm.value.placeInfo.contactsTel
    ) {
        return showNotify({
            type: 'danger',
            message: '请输入联系方式或单位联系方式',
        })
    } else if (
        (taskForm.value.placeInfo.idType == '' ||
            !taskForm.value.placeInfo.idType) &&
        taskForm.value.placeInfo.partyType == 0
    ) {
        return showNotify({ type: 'danger', message: '请选择证件类型' })
    } else if (
        (taskForm.value.placeInfo.idCode == '' ||
            !taskForm.value.placeInfo.idCode) &&
        taskForm.value.placeInfo.partyType == 0
    ) {
        return showNotify({ type: 'danger', message: '请输入证件号' })
    } else if (
        taskForm.value.placeInfo.idCode.length < 1 || taskForm.value.placeInfo.idCode.length > 18
    ) {
        return showNotify({
            type: 'danger',
            message: '请输入合法证件号或社会信用代码',
        })
    } else if (
        taskForm.value.placeInfo.partyType != 0 &&
        (taskForm.value.placeInfo.headName == '' ||
            !taskForm.value.placeInfo.headName)
    ) {
        return showNotify({
            type: 'danger',
            message: '请输入法人/负责人/经营者姓名',
        })
    } else if (
        taskForm.value.placeInfo.partyType != 0 &&
        taskForm.value.placeInfo.partyType != 2 &&
        (taskForm.value.placeInfo.headTel == '' ||
            !taskForm.value.placeInfo.headTel)
    ) {
        return showNotify({
            type: 'danger',
            message: '请输入法人/负责人/经营者联系方式',
        })
    } else if (
        taskForm.value.placeInfo.registerTownCode == 0 &&
        taskForm.value.placeInfo.partyType != 0
    ) {
        return showNotify({ type: 'danger', message: '请选择注册地址' })
    } else if (
        taskForm.value.placeInfo.registerAddress == '' &&
        taskForm.value.placeInfo.partyType != 0
    ) {
        return showNotify({
            type: 'danger',
            message: '请输入详细注册地址',
        })
    } else if (taskForm.value.placeInfo.operateTownCode == 0) {
        return showNotify({ type: 'danger', message: '请选择住址或经营地址' })
    } else if (taskForm.value.placeInfo.operateAddress == '') {
        return showNotify({
            type: 'danger',
            message: '请输入详细住址或详细经营地址',
        })
    }
    taskForm.value.caseActionId = ayList.value.map(item => item.value).join(',')
    taskForm.value.caseActionName = ayList.value.map(item => item.text).join(',')
    if (!id.value) {
        const res = await useRegister.insertCaseInfo(taskForm.value)
        if (res.code == 0) {
            if (backFlag.value) {
                showSuccessToast('添加成功')
            } else {
                showSuccessToast('保存成功')
            }
            router.push({ name: 'punishList' })
        } else {
            showFailToast(res.message)
        }
    } else {
        Reflect.set(taskForm.value, 'id', id.value)
        const res = await useRegister.editCaseInfo(taskForm.value)
        if (res.code == 0) {
            showSuccessToast('修改成功')
            router.push({ name: 'punishList' })
        } else {
            showFailToast(res.message)
        }
    }
}
//开始检查
const goCheck = () => {
    taskForm.value.draftFlag = 0
    backFlag.value = true
    onSubmit()
}

//案由相关
const showAll = ref(false)
const ayList = ref([])
const checked = ref([]);
const checkboxRefs = ref([]);
const toggle = (index) => {
    checkboxRefs.value[index].toggle();
};



const getData = (val) => {
    const res = pickerData.value.filter((item) => {
        return val.indexOf(item.text) > -1;
    });
    return res;
}

const ayCancel = () => {
    picker1.value = false
    checked.value = []
}

const ayConfirm = () => {
    const res = getData(JSON.stringify(checked.value))
    picker1.value = false
    ayList.value = res
}

const clearAY = (index) => {
    ayList.value.splice(index, 1)
}

const handleShow = () => {
    showAll.value = !showAll.value
}

const gotoTaskList = () => {
    router.push({
        name: 'taskList',
        query: {
            id: id.value,
            taskId: '',
            taskIdSearch: taskId.value || route.query.taskIdSearch,
            params: JSON.stringify({
                taskForm: taskForm.value,
                ayList: ayList.value,
                areaValue: areaValue.value,
                areaValue2: areaValue2.value
            })
        }
    })
}


onMounted(async () => {
    let current = new Date()
    let year = current.getFullYear()
    let m = current.getMonth() + 1 // 注意月份从0开始，需要加1
    let d = current.getDate()
    let month = ''
    let day = ''
    if (m < 10) {
        month = '0' + m
    } else {
        month = m + ''
    }
    if (d < 10) {
        day = '0' + d
    } else {
        day = d + ''
    }
    currentDate.value.push(year)
    currentDate.value.push(month)
    currentDate.value.push(day)
    if (params.value) {
        console.log(params.value, 'params');
        taskForm.value = params.value.taskForm
        ayList.value = params.value.ayList
        areaValue.value = params.value.areaValue
        areaValue2.value = params.value.areaValue2
    }

    if (taskId.value) {
        const ret = await usePublic.getDictionary('from_type')
        let selectItem = ret.data.filter(item => item.configName == '消防监督管理工作中发现')[0]

        taskForm.value.sourceId = selectItem.id
        taskForm.value.sourceName = selectItem.configName

        taskForm.value.taskId = taskId.value
        const res = await useVision.taskInfo(taskId.value)
        const data = res.data.placeInfo
        taskForm.value.placeInfo.partyType = data.partyType
        taskForm.value.placeInfo.placeName = data.placeName
        taskForm.value.placeInfo.contactsTel = data.contactsTel
        taskForm.value.placeInfo.idCode = data.idCode
        taskForm.value.placeInfo.headName = data.headName
        taskForm.value.placeInfo.headTel = data.headTel
        taskForm.value.placeInfo.birthDate = data.birthDate
        taskForm.value.placeInfo.idType = data.idType
        taskForm.value.placeInfo.idTypeName = data.idTypeName
        taskForm.value.placeInfo.sex = data.sex
        //注册地址，住址
        taskForm.value.placeInfo.registerCountyCode =
            data.registerCountyCode
        taskForm.value.placeInfo.registerCounty = data.registerCounty
        taskForm.value.placeInfo.registerTownCode = data.registerTownCode
        taskForm.value.placeInfo.registerTown = data.registerTown
        cascaderValue.value = data.registerTownCode
        areaValue.value =
            '长沙市' + data.registerCounty + data.registerTown
        taskForm.value.placeInfo.registerAddress = data.registerAddress

        //经营地址
        taskForm.value.placeInfo.operateCountyCode =
            data.operateCountyCode
        taskForm.value.placeInfo.operateCounty = data.operateCounty
        taskForm.value.placeInfo.operateTownCode = data.operateTownCode
        taskForm.value.placeInfo.operateTown = data.operateTown
        cascaderValue2.value = data.operateTownCode
        areaValue2.value =
            '长沙市' + data.operateCounty + data.operateTown
        taskForm.value.placeInfo.operateAddress = data.operateAddress
    }

    if (id.value) {
        const res = await useRegister.caseDetail(id.value)
        if (res.code == 0) {
            taskForm.value.sourceName = res.data.sourceName
            taskForm.value.sourceId = res.data.sourceId
            taskForm.value.caseActionId = res.data.caseActionId
            taskForm.value.caseActionName = res.data.caseActionName
            taskForm.value.caseBrief = res.data.caseBrief
            taskForm.value.opinion = res.data.opinion
            taskForm.value.opinionId = res.data.opinionId
            taskForm.value.approveId = res.data.approveId
            taskForm.value.placeInfo.partyType = res.data.placeInfo.partyType
            taskForm.value.placeInfo.placeName = res.data.placeInfo.placeName
            taskForm.value.placeInfo.contactsTel = res.data.placeInfo.contactsTel
            taskForm.value.placeInfo.idCode = res.data.placeInfo.idCode
            taskForm.value.placeInfo.headName = res.data.placeInfo.headName
            taskForm.value.placeInfo.headTel = res.data.placeInfo.headTel
            taskForm.value.placeInfo.birthDate = res.data.placeInfo.birthDate
            taskForm.value.placeInfo.idType = res.data.placeInfo.idType
            taskForm.value.placeInfo.idTypeName = res.data.placeInfo.idTypeName
            taskForm.value.placeInfo.sex = res.data.placeInfo.sex
            taskForm.value.otherSource = res.data.otherSource
            if (res.data.caseActionId) {
                let arr1 = res.data.caseActionId.split(',')
                let arr2 = res.data.caseActionName.split(',')
                ayList.value = arr1.map((item, index) => { return { value: item, text: arr2[index] } })
            }
            //注册地址，住址
            taskForm.value.placeInfo.registerCountyCode =
                res.data.placeInfo.registerCountyCode
            taskForm.value.placeInfo.registerCounty =
                res.data.placeInfo.registerCounty
            taskForm.value.placeInfo.registerTownCode =
                res.data.placeInfo.registerTownCode
            taskForm.value.placeInfo.registerTown = res.data.placeInfo.registerTown
            cascaderValue.value = res.data.placeInfo.registerTownCode
            areaValue.value =
                '长沙市' +
                res.data.placeInfo.registerCounty +
                res.data.placeInfo.registerTown
            taskForm.value.placeInfo.registerAddress =
                res.data.placeInfo.registerAddress

            //经营地址
            taskForm.value.placeInfo.operateCountyCode =
                res.data.placeInfo.operateCountyCode
            taskForm.value.placeInfo.operateCounty = res.data.placeInfo.operateCounty
            taskForm.value.placeInfo.operateTownCode =
                res.data.placeInfo.operateTownCode
            taskForm.value.placeInfo.operateTown = res.data.placeInfo.operateTown
            cascaderValue2.value = res.data.placeInfo.operateTownCode
            areaValue2.value =
                '长沙市' +
                res.data.placeInfo.operateCounty +
                res.data.placeInfo.operateTown
            taskForm.value.placeInfo.operateAddress =
                res.data.placeInfo.operateAddress
            taskForm.value.placeInfo.id = res.data.placeInfo.id
            taskForm.value.taskId = res.data.taskId
            taskForm.value.organizerId = res.data.organizerId
            taskForm.value.organizer = res.data.organizer
        }
    }
})
console.log(454546);
</script>

<style lang="scss" scoped>
.van-checkbox-group {
    height: 400px;
    overflow-y: scroll;
    padding-bottom: 20px;
    box-sizing: border-box;
}

.addPunish {
    width: 100%;
    height: calc(100%);
    overflow-y: hidden;
    background-color: #ffffff;

    .task {
        width: 100%;
        height: calc(100% - 122px);
        overflow-y: auto;
        margin-top: 46px;
    }
}

.line10 {
    width: 100%;
    height: 10px;
    background-color: #f7f7f7;
}

.partyType {
    padding: 16px;
    border-bottom: 1px solid #f5f5f5;

    .title {
        font-size: 16px;
        font-weight: 400;
        letter-spacing: 0px;
        line-height: 24px;
        color: #4d4d4d;
        margin-bottom: 14px;
    }

    .party {
        display: flex;
        align-items: center;
        padding: 0 8px;

        .partyItem1 {
            width: 9.8125rem;
            height: 2.25rem;
            line-height: 2.25rem;
            text-align: center;
            background-color: #f2f2f2;
            border: 1px solid #f2f2f2;
            border-radius: 4px;
            font-size: 14px;
            font-weight: 400;
            color: #666666;
            margin-right: 12px;
            flex-grow: 1;
        }

        .partyItem2 {
            width: 9.8125rem;
            height: 2.25rem;
            line-height: 2.25rem;
            background-color: #f2f2f2;
            border: 1px solid #f2f2f2;
            border-radius: 4px;
            font-size: 14px;
            font-weight: 400;
            color: #666666;
            text-align: center;
            flex-grow: 1;
        }

        .partyItem1Active {
            border: 1px solid #1764ce;
            background-color: rgba(23, 100, 206, 0.1);
            color: #1764ce;
        }
    }
}

.sex {
    padding: 16px;
    display: flex;
    border-bottom: 1px solid #f5f5f5;

    .title {
        width: 130px;
        font-size: 16px;
        font-weight: 400;
        letter-spacing: 0px;
        line-height: 24px;
        color: #4d4d4d;
    }
}

.area {
    padding: 16px 16px 0 16px;
    // display: flex;
    // border-bottom: 1px solid #f5f5f5;

    .title {
        width: 120px;
        font-size: 16px;
        font-weight: 400;
        letter-spacing: 0px;
        line-height: 24px;
        color: #4d4d4d;
    }
}

.childList-2 {
    .childList-title {
        padding: 16px 16px 0 16px;
        font-size: 16px;
        font-weight: 500;
        letter-spacing: 0px;
        line-height: 24px;
        color: #666666;
    }
}

.flex {
    padding: 0 16px;
    height: 56px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #f2f2f2;

    .label {}

    .btn {
        border-radius: 4px;
        background: rgba(23, 100, 206, 0.1);
        padding: 6px 12px 6px 12px;
        justify-content: space-between;
        display: flex;
        align-items: center;
        /** 文本1 */
        font-size: 14px;
        font-weight: 400;
        letter-spacing: 0px;
        color: rgba(23, 100, 206, 1);
        line-height: 20px;

        img {
            width: 12px;
            height: 12px;
            margin-right: 4px;
        }
    }

    .btn1 {
        color: rgba(23, 100, 206, 1);
    }
}

.ay-box {
    padding: 16px;

    li {
        border-radius: 4px;
        background: rgba(245, 245, 245, 1);
        padding: 8px 8px 8px 8px;
        /** 文本1 */
        font-size: 14px;
        font-weight: 400;
        color: rgba(77, 77, 77, 1);
        margin-bottom: 8px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        img {
            width: 18px;
            height: 18px;
            margin-left: 10px;
        }
    }

    .switch {
        display: flex;
        justify-content: center;
        align-items: center;
        /** 文本1 */
        font-size: 14px;
        font-weight: 400;
        color: rgba(153, 153, 153, 1);

        img {
            width: 10px;
            height: 5px;
            margin-left: 4px;
        }

        .retract {
            rotate: 180deg;
        }
    }
}
</style>